<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
  <title>个人博客(PersonalBlog)</title>
  <link rel="stylesheet" href="./CSS/index.css">
</head>
<body>
<span class="BlogLogo">
            <img src="./img/02.png" alt="">
        </span>
<h1 class="BlogTitle">银河的个人博客</h1>
<nav class="Nav1">
  <ul class="nav-list">
    <li><a href="./subpage/RootManagePage.html">用户信息管理平台</a></li>
    <li><a href="./subpage/UserArticleInformationManagementPlatform.html">用户文章信息管理平台</a></li>
    <li><a href="./subpage/AdministratorInformationManagementPlatform.html">管理员信息管理平台</a></li>
  </ul>
</nav>
<span>
            <button class="login"><a href="./subpage/login.html">登录</a></button>
            <button class="resigter"><a href="./subpage/resigter.html">注册</a></button>
        </span>
<div class="Banner">
  <img src="./img/01.png" alt="Banner">
  <div class="floating-block">
    <p>个人博客</p>
  </div>
</div>
<nav class="Nav2">
  <ul class="nav-list1">
    <li><a href="index.html">编程相关</a></li>
    <li><a href="news.html">现在科学</a></li>
    <li><a href="about.html">人文历史</a></li>
  </ul>
</nav>
<div class="CommentArea">
  <div id="messageArea">
    <!-- 留言内容将在这里显示 -->
  </div>
  <div class="messageDiv">
    <!--    <h2 class="InputDivTitle">留言板</h2>-->
    <input type="text" id="messageInput" placeholder="输入您的留言...">
    <button id="submitBtn">提交留言</button>
  </div>
</div>
<script>
  // 获取提交按钮并为其添加点击事件监听器
  document.getElementById('submitBtn').addEventListener('click', function () {
    // 获取用户输入的留言内容
    const messageInput = document.getElementById('messageInput');
    const messageContent = messageInput.value.trim(); // 去除空格

    // 检查留言是否为空
    if (messageContent !== '') {
      // 创建一个新的留言显示框
      const newMessageDiv = document.createElement('div');
      newMessageDiv.className = 'message';

      // 获取当前日期并格式化
      const currentDate = new Date();
      const formattedDate = currentDate.toLocaleDateString() + ' ' + currentDate.toLocaleTimeString();

      // 创建留言内容段落
      const messageParagraph = document.createElement('p');
      messageParagraph.textContent = messageContent;

      // 创建日期显示段落
      const dateParagraph = document.createElement('p');
      dateParagraph.className = 'message-date';
      dateParagraph.textContent = '发布日期: ' + formattedDate;

      // 将留言内容和日期添加到留言框
      newMessageDiv.appendChild(messageParagraph);
      newMessageDiv.appendChild(dateParagraph);

      // 将新的留言显示框添加到留言区域
      const messageArea = document.getElementById('messageArea');
      messageArea.appendChild(newMessageDiv);

      // 清空输入框，准备下一次留言
      messageInput.value = '';
    } else {
      alert('留言内容不能为空！');
    }
  });
</script>
<!--      <canvas id="visitChart"></canvas>-->
<footer>
  <p>版权所有©2024 银河的个人博客 赵星和</p>
</footer>
<script src="./js/index.js"></script>
<script src="./js/index_Element_01.js"></script>
<script src="./js/chart.js"></script>
<!--<script>-->
<!--  const ctx = document.getElementById('visitChart').getContext('2d');-->
<!--  const visitChart = new Chart(ctx, {-->
<!--    type: 'line',-->
<!--    data: {-->
<!--      labels: [], // X轴标签-->
<!--      datasets: [{-->
<!--        label: '访问量',-->
<!--        data: [], // 数据点-->
<!--        backgroundColor: 'rgba(0, 123, 255, 0.2)',-->
<!--        borderColor: 'rgba(0, 123, 255, 1)',-->
<!--        borderWidth: 1-->
<!--      }]-->
<!--    },-->
<!--    options: {-->
<!--      scales: {-->
<!--        y: {-->
<!--          beginAtZero: true-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  });-->

<!--  // 模拟实时更新数据-->
<!--  function updateChartData() {-->
<!--    const now = new Date();-->
<!--    const time = now.getHours() + ':' + now.getMinutes() + ':' + now.getSeconds();-->

<!--    // 添加新数据-->
<!--    visitChart.data.labels.push(time);-->
<!--    visitChart.data.datasets.forEach((dataset) => {-->
<!--      dataset.data.push(Math.floor(Math.random() * 100)); // 随机生成访问量-->
<!--    });-->

<!--    // 保持数据长度，只显示最近10个数据点-->
<!--    if (visitChart.data.labels.length > 10) {-->
<!--      visitChart.data.labels.shift();-->
<!--      visitChart.data.datasets.forEach((dataset) => {-->
<!--        dataset.data.shift();-->
<!--      });-->
<!--    }-->

<!--    // 更新图表-->
<!--    visitChart.update();-->
<!--  }-->

<!--  // 每秒更新一次数据-->
<!--  setInterval(updateChartData, 1000);-->
<!--</script>-->
<!--<script>-->
<!--  function searchArticles(keyword) {-->
<!--    // 发送请求到后端，获取筛选后的文章-->
<!--    fetch(`/search?keyword=${encodeURIComponent(keyword)}`)-->
<!--      .then(response => response.json())-->
<!--      .then(data => {-->
<!--        // 显示筛选后的文章-->
<!--        const articlesDiv = document.getElementById('articles');-->
<!--        articlesDiv.innerHTML = ''; // 清空现有内容-->
<!--        data.forEach(article => {-->
<!--          const articleDiv = document.createElement('div');-->
<!--          articleDiv.textContent = article.title;-->
<!--          articlesDiv.appendChild(articleDiv);-->
<!--        });-->
<!--      });-->
<!--  }-->
<!--</script>-->
</body>
</html>
